<template>
    <div style="width:390px ;display: flex;flex-direction: row;">
      <div style="width: 30px;height: 30px;margin-top: 5px;">
        <el-icon @click = "return2" style="font-size: 30px;width: 30px;height: 30px;"><Close /></el-icon>
        </div>
        <p @click="fanhuiShouye" style="font-size: 20px;margin-left: 290px;margin-top: 5px;">首页</p>
    </div>
    <div>
        <img style="width: 110px;height: 110px;margin-left: 130px;" src="./图片/1111.png">
        <el-input style="height: 40px;margin-top: 20px;"v-model="userLogin.telephone" type="text"  autocomplete="off" placeholder="您的电话..." />
        <el-input style="height: 40px;margin-top: 30px;" v-model="userLogin.password"  type="password" placeholder="您的密码..."   />
        <el-button @click= "denglu1" style="width: 310px;margin-left: 30px;margin-top: 200px;"  type="primary" round>登录</el-button>
    </div>
    <RouterView />
</template>
  
<style scoped>
  
</style>
  
<script setup>
  import {Close} from "@element-plus/icons-vue"
  import { useRouter } from 'vue-router';
  import { ref,onMounted} from 'vue';
  import {ElMessage} from 'element-plus'
  const router1 = useRouter();
  const return2 = () => {
  // 如果是内部路由跳转 (Vue Router)
  router1.push({path:'/wodeJiemian'})


};
const router2 = useRouter();
  const fanhuiShouye = () => {
  // 如果是内部路由跳转 (Vue Router)
  router2.push({path:'/'})
};

// 登录
const  userLogin =ref({
    telephone:"",
    password:""
    });

const    router  = useRouter();
const  denglu1  =()=>{
    fetch(`http://localhost:3000/users?telephone=${userLogin.value.telephone}`,{
    method:'get'
}).then(response=>response.json()).then((data)=>{
    if(data.length>0){
            if(data[0].password === userLogin.value.password  ){
                localStorage.setItem("token",data[0].token);
                localStorage.setItem("loginInfo",JSON.stringify(data[0]));
                localStorage.setItem("telephone",data[0].telephone);
                localStorage.setItem("nickname",data[0].nickname);
                localStorage.setItem("avatarUrl",data[0].avatarUrl);
                localStorage.setItem("id",data[0].id);
                router.push({path:"/dengluChengg"})
                ElMessage.success("登录成功")
            }else{
                ElMessage.error("用户名或密码错误")
            }
    }else{
        ElMessage.success('用户不存在')
    }
})
} 


</script>
  